<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <el-button type="success" @click="dialogFormVisibleI = true">新增</el-button>
            <el-button type="danger" @click="deleteRoleAll()">删除</el-button>
        </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="roles"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="id"
                        label="编号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="可操作状态"
                        width="400">
                </el-table-column>
                <el-table-column
                        prop="roleState"
                        label="状态"
                        width="120"
                        :formatter="stateFormat">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" >修改</el-button>
                        <el-button type="text" size="small" v-if="scope.row.roleState==1" @click="updataRoleState1(scope.row.id)">禁用</el-button>
                        <el-button type="text" size="small" v-if="scope.row.roleState==0" @click="updataRoleState0(scope.row.id)">启用</el-button>
                        <el-button type="text" size="small" @click="deleteRole(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增 -->
        <div>
            <el-dialog title="新增角色" :visible.sync="dialogFormVisibleI">
                <el-form :model="role">
                    <el-form-item label="编号" >
                        <el-input v-model="role.roleCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="项目角色" >
                        <el-input v-model="role.roleName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
               <div>
                    可操作状态：
                    <el-checkbox-group v-model="checkList1" >
                        <el-checkbox v-for="state in states" :label="state.id" :key="state.id">{{state.name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div>
                    可操作类型：
                    <el-checkbox-group v-model="checkList2">
                        <el-checkbox v-for="type in types" :label="type.id" :key="type.id">{{type.name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleI = false">取 消</el-button>
                    <el-button type="primary" @click="insertRole()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <script type="text/javascript">
        var _this;
        var app = new Vue({
            el:"#app",
            data:{
                roles : [],
                role : {
                    roleCode : "",
                    roleName : ""
                },
                multipleSelection: [],
                dialogFormVisibleI :false,
                dialogFormVisibleU :false,
                checkList1 : [],
                checkList2 : [],
                states : [],
                types : []
            },
            created:function(){
                this.selectRoleAll();
                this.selectState();
                this.selectType();
            },
            methods:{
                stateFormat(row, column){
                    if (row.roleState == 1) {
                        return '有效'
                    } else  {
                        return '禁用'
                    }
                },
                handleSelectionChange(val) {
                    var _this = this;
                    _this.multipleSelection = val;
                },

                selectRoleAll : function(){
                    var _this = this;
                    $.ajax({
                        url : "/role",
                        type : "get",
                        dataType : "json",
                        success : function(data) {
                            _this.roles=data.list;
                        },
                        error : function() {

                        }
                    });
                },

                selectState : function(){
                    var _this = this;
                    $.ajax({
                        url : "/Bstate",
                        type : "get",
                        dataType : "json",
                        success : function(data) {
                            _this.states=data.list;
                        },
                        error : function() {

                        }
                    });
                },

                selectType : function(){
                    var _this = this;
                    $.ajax({
                        url : "/Btype",
                        type : "get",
                        dataType : "json",
                        success : function(data) {
                            _this.types=data.list;
                        },
                        error : function() {

                        }
                    });
                },

                insertRole : function(){
                    var _this = this;
                    var role = {
                        role : _this.role,
                        arr1 : _this.checkList1,
                        arr2 : _this.checkList2
                    }
                    $.ajax({
                        url : "/role",
                        type : "post",
                        contentType:"application/json;charset=UTF-8",
                        data : JSON.stringify(role),
                        dataType : "json",
                        success : function(data) {
                            _this.selectRoleAll();
                            _this.dialogFormVisibleI = false;
                            _this.$message("新增成功");
                        },
                        error : function() {

                        }
                    });
                },

                updataRoleState1 : function(id){
                    var _this = this;
                    $.ajax({
                        url : "/role/updata1",
                        type : "post",
                        data : {id : id},
                        dataType : "json",
                        success : function(data) {
                            _this.selectRoleAll();
                        },
                        error : function() {

                        }
                    });
                },

                updataRoleState0 : function(id){
                    var _this = this;
                    $.ajax({
                        url : "/role/updata0",
                        type : "post",
                        data : {id : id},
                        dataType : "json",
                        success : function(data) {
                            _this.selectRoleAll();
                        },
                        error : function() {

                        }
                    });
                },

                deleteRole : function(id){
                    var _this = this;
                    $.ajax({
                        url : "/role/delete",
                        type : "post",
                        data : {id : id},
                        dataType : "json",
                        success : function(data) {
                            _this.selectRoleAll();
                        },
                        error : function() {

                        }
                    });
                },

                deleteRoleAll : function(){
                    var _this = this;
                    var list = _this.multipleSelection;
                    var arr = list.map(function(v){return v.id;});
                    $.ajax({
                        url : "/role",
                        type : "delete",
                        traditional: true,
                        data : {arr : arr},
                        dataType : "json",
                        success : function(data) {
                            _this.selectRoleAll();
                            _this.$message("删除成功");
                        },
                        error : function() {

                        }
                    });
                },
            }

        });

    </script>
</body>
</html>